import React, { Component } from 'react'
import { NavBar, Icon } from "antd-mobile";
import "./Endearment.scss"
export default class Endearment extends Component {
  state = {
    text: ""
  }
  handleChange = (e) => {
    this.setState({
      text: e.target.value,
    });
  }
  handleSave = () => {
    localStorage.setItem("personalInfo",JSON.stringify({endearment:this.state.text ,sex:"男",introduce:"介绍一下自己"}))
    this.props.history.go(-1)
  }

  render() {
    return (
      <div className="endemrment">
        {/* 导航开始 */}
        <div className="endemrment-nav">
          <NavBar
            className="endemrment-header"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            rightContent={[
              <Icon key="1" type="ellipsis" />,
            ]}
          >我的昵称</NavBar>
        </div>
        {/* 导航结束 */}

        {/* edit开始 */}
        <div className="endemrment-edit">
          <input type="text" value={this.state.text} onChange={this.handleChange} />
        </div>
        {/* edit结束 */}

        {/* 底部保存开始 */}
        <div className="endemrment-save" onClick={this.handleSave}>
          <div className="save-title">保存</div>
        </div>
        {/* 底部保存结束 */}
      </div>
    )
  }
}
